<template>
  <div class="box">
    <OrderTop class="header"></OrderTop>
    <div class="content">
      <OrderCon></OrderCon>
    </div>
    <OrderBottom class="footer"></OrderBottom>
  </div>
</template>

<script>
import OrderTop from "./OrderTop";
import OrderCon from "./OrderCon";
import OrderBottom from "./OrderBottom";

export default {
  name:'FirmOrder', 
  data () {
    return {
    }
   
  },
   components:{
OrderTop,OrderCon,OrderBottom
    }
}
</script>
<style scoped>
.box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content{
    flex: 1;
    height: auto;
    overflow-y: auto;
}
.header{
    height: 40px;
}
.footer{
height: 120px;
}
</style>